<template>
	<view class="classlist">
		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		
		<view class="content">
			<navigator :url="'/pages/preview/preview?id='+item._id" class="item" 
			v-for="item in classList" 
			:key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		
		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData ? 'noMore':'loading'"></uni-load-more>
		</view>
		
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
import {ref} from "vue"
import {apiGetClassList,apiGetHistoryList} from "@/api/apis.js"
import {onLoad,onUnload, onReachBottom,onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
import {gotoHome} from "@/utils/common.js"

const classList = ref([])
const noData = ref(false)

//获取页面地址参数
const queryParmars = {
	pageNum:1,
	pageSize:12
}

let pageNamer;

onLoad((e)=>{
	
	let {id=null,name=null,type=null} = e;
	
	//如果id不存在，将跳转到主页
	// if(!id){
	// 	gotoHome();
	// 	return;
	// }
	
	console.log("参数是",e);
	
	if(type){
		queryParmars.type = type; 
	}
	if(id){
		queryParmars.classid = id;
	}

	pageNamer = name;
	//修改页面标题
	uni.setNavigationBarTitle({
		title:name
	})
	
	//setup在onload之前执行
	getClassList();
	
})

onReachBottom(()=>{
	
	if(noData.value)
	{
		return;
	}
	
	queryParmars.pageNum++;
	getClassList();
	
})
	
//获取分类列表网络数据
const getClassList = async()=>{
	
	let res;
	if(queryParmars.classid)
	{
		res = await apiGetClassList(queryParmars);
	}
	if(queryParmars.type)
	{
		res = await apiGetHistoryList(queryParmars);
	}
	
	classList.value = [...classList.value, ...res.data];
	if(queryParmars.pageSize > res.data.length)
		noData.value = true;
		
	//把数据放在缓存中使用
	uni.setStorageSync("storgClassList",classList.value);
	
}

//分享给好友
onShareAppMessage((e)=>{
	
	return{
		title:"图库",
		path:"/pages/classlist/classlist?id="+queryParmars.classid + "&name="+pageNamer
	}
	
})

//分享到朋友圈
onShareTimeline(()=>{
	
	return{
		title:"图库-"+pageNamer,
		//imageUrl:'xxx'
		query:"id=" + queryParmars.classid + "&name=" + pageNamer
	}
	
})

//离开页面时清除缓存
onUnload(()=>{
	uni.removeStorageSync("storgClassList")
})
	
</script>

<style lang="scss" scoped>

.classlist{
	
	.content{
		
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 5rpx;
		padding: 5rpx;
		
		.item{
			
			height: 440rpx;
			
			image{
				
				width: 100%;
				height: 100%;
				display: block;
				
			}
			
		}
		
	}
	
}
       
</style>  
